<!--
  v-for

  ----

  如果 v-for 有移动(增、删时)， 需要添加 key

  key 添加场景(加入数据源为 数组)
  1、增
  2、删
  3、移动
  4、排序
  等等....

  否则复用后，上面的顺序就会紊乱

  ----------------------------------

  针对key (高效使用key)

  如果数据源是
  1、数字、字符串等等的基本数据类型， key 使用 index
  2、对象， key 使用 对象

  为什么呢？ 值得分析...
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul v-for='m in names'>
      <li>{{m}}</li>
    </ul>

    <!-- (m ,index) 元组 -->
    <ul v-for='(m, index) in names'>
      <li>{{index+1}} . {{m}}</li>
    </ul>
  </div>

  <script src='../../js/vue.js'></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        names: ['why', 'kobe', 'james', 'curry']
      }
    })
  </script>
</body>
</html>